<template>
  <div class="card-wrap">
    <div v-if="userInfo" class="check-user-card">
      <div :style="{padding: showMobilePage ? '0 12px' : '0 24px'}" class="card-top">
        <div class="top-element-info">
          <!-- <el-image
            :src="userInfo.avatar || adminIcon"
            :preview-src-list="[userInfo.avatar || adminIcon]"
            class="avatar-box"/> -->
          <el-avatar :src="userInfo.avatar || adminIcon" :size="40" class="avatar-box" @click.native="lookImg(userInfo.avatar || adminIcon)" />
          <div class="blank">
            <div class="flex-center">
              <p :class="{'ellipsisOne': userInfo.userName.length > 9}" class="username">{{ userInfo.userName || '--' }}</p>
              <img :src="getGenderImg(userInfo.gender)" class="gender" alt="gender">
              <div :class="`job-status${userInfo.jobStatus===1?1:2}`" class="job-status">{{ userInfo.jobStatus === 1 ? '在职' : '离职' }}</div>
            </div>
            <div class="card-center">
              <p class="approve-info">共完成 <span class="num">{{ userInfo.approvalNum || '--' }}次</span> 审批</p>
              <p v-if="userInfo.offState"><span style="color: #333;">{{ userInfo.offState }}</span></p>
            </div>
          </div>
        </div>
        <div class="line" />
      </div>
      <div :style="{padding: showMobilePage ? '16px 12px' : '16px 24px'}" class="card-main">
        <div v-if="hasRouteAuth('auth:system:checkFinanceInfo') || isSelf" class="finance-info">
          <div class="flex-center">
            <Title title="财务信息" font-size="16px"/>
            <div class="info-action-btn" @click="toggleTypeChange">
              {{ showToggleBtn ? '收起' : '展开' }}
              <i :class="!showToggleBtn ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" />
            </div>
          </div>
          <el-row
            :class="[showToggleBtn && 'fixed-info-row-toggle', showMobilePage && 'mobile-fixed-info-row']"
            class="finance-info-row fixed-info-row">
            <el-col :span="showMobilePage ? 24 : 12" class="flex-center">
              <div class="field-name">借款欠额:</div>
              <el-tooltip :open-delay="800" placement="top">
                <div slot="content" style="max-width:200px;" >
                  {{ userInfo.financialInfo.owedAmount / 100 | moneyFilter(true, '', true) }}
                </div>
                <div :style="{ color: getStatusColor }" class="bold-number">
                  {{ userInfo.financialInfo.owedAmount / 100 | bigDataFilter(true, '', true, 2) }}
                </div>
              </el-tooltip>
            </el-col>
            <el-col :span="showMobilePage ? 24 : 12" class="flex-center">
              <div class="field-name">状态:</div>
              <span :style="{ color: getStatusColor }" class="nowrap">
                {{ userInfo.financialInfo.amountStatus === 0 ? '未还清' : '未欠款' }}
              </span>
            </el-col>
          </el-row>
          <el-row v-if="showToggleBtn" :class="showMobilePage && 'mobile-toggle-info-row'" class="finance-info-row toggle-info-row">
            <el-col v-for="(item, index) in financeInfo" :span="showMobilePage ? 24 : 12" :key="index">
              <div v-if="item.isEmptyCol" />
              <div v-else class="flex-center" style="margin: 0 8px">
                <div class="field-name">{{ item.name }}：</div>
                <div
                  v-if="item.routeName && (userInfo.financialInfo[item.field] || userInfo.financialInfo[item.field] === 0)"
                  class="link field-content bold-number"
                  @click="toListPage(item)">
                  <el-tooltip :open-delay="800" placement="top-start">
                    <div slot="content" style="max-width:200px;" >
                      {{ userInfo.financialInfo[item.field] / 100 | moneyFilter(true, '', true) }}
                    </div>
                    <div>{{ userInfo.financialInfo[item.field] / 100 | bigDataFilter(true, '', true, 2) }}</div>
                  </el-tooltip>
                </div>
                <div v-else class="field-content bold-number">
                  <el-tooltip :open-delay="800" placement="top-start">
                    <div slot="content" style="max-width:200px;">
                      {{ userInfo.financialInfo[item.field] / 100 | moneyFilter(true, '', true) }}
                    </div>
                    <div>{{ userInfo.financialInfo[item.field] / 100 | bigDataFilter(true, '', true, 2) }}</div>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div v-for="(mainItem, mianIndex) in mainData" :key="mianIndex" :class="{'mb24': mianIndex !== mainData.length-1}">
          <Title :title="mainItem.label" font-size="16px"/>
          <div v-for="(item, index) in mainItem.children" :key="index" class="main-list" style="margin-top: 12px">
            <p :style="mainItem.labelWidth?{width: mainItem.labelWidth}:''" class="field-name" v-html="item.name+':'"/>
            <div v-if="item.type === 'array'" class="field-content">
              <p v-if="userInfo[item.field] && userInfo[item.field].length === 0">--</p>
              <div v-else>
                <p v-for="(current, ind) in userInfo[item.field]" :key="ind">{{ current }}</p>
              </div>
            </div>
            <p v-else-if="item.type === 'time'" class="field-content">{{ format(userInfo[item.field], 'YYYY-MM-DD') }}</p>
            <div v-else-if="item.type === 'salesInfo'" class="field-content flex-center">
              <el-tooltip :open-delay="500" class="item" placement="top">
                <div slot="content">{{ getNum(`financialInfo.${item.field}`) | moneyFilter }} / {{ getNum(`financialInfo.${item.totalField}`) | moneyFilter }}</div>
                <div class="flex-center num-style">
                  <span class="red">{{ getNum(`financialInfo.${item.field}`) | bigDataFilter(true, '', false, 2) }}</span>
                  <span>/</span>
                  <span>{{ getNum(`financialInfo.${item.totalField}`) | bigDataFilter(true, '', false, 2) }}</span>
                </div>
              </el-tooltip>
              <div v-if="item.field === 'remainingExternalHarvestAmount' && hasRouteAuth('crm:externalHarvest:create')" class="button-text ml10" @click="toEexternalHarvest">提高额度</div>
            </div>
            <p v-else class="field-content">{{ userInfo[item.field] || '--' }}</p>
          </div>
        </div>
        <el-button :disabled="!userInfo.openId" class="feishu-btn" type="primary" size="small" @click="openFeishu">{{ userInfo.openId?'发送飞书消息':'该用户未激活，无法发送消息' }}</el-button>
      </div>
    </div>
    <el-dialog
      :visible="showLookBigImg"
      :before-close="closelookImg"
      :append-to-body="true"
      :class="[
        showMobilePage?'mobile-page-dialog':''
      ]"
      class="auto-common-dialog-size"
    >
      <div>
        <img :src="lookBigImg" style="max-width: calc(100vw - 200px);max-height: calc(100vh - 200px);" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { format } from '@/filters/date';
import { moneyFilter, bigDataFilter } from '@/filters/number';
import { hasRouteAuth } from '@/utils/permission';
import adminIcon from '@/assets/user-avatar.png';
import male from '@/assets/user/male.png';
import female from '@/assets/user/female.png';
import gender from '@/assets/user/gender.png';
import Title from '@/components/Title';

export default {
  components: { Title },
  filters: { moneyFilter, bigDataFilter },
  props: {
    userInfo: {
      type: Object,
      default: null
    },
    currentUser: {
      type: Object,
      default: null
    },
    isMobilePage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      hasRouteAuth,
      adminIcon,
      male,
      female,
      gender,
      showToggleBtn: false,
      lookBigImg: '',
      showLookBigImg: false
    };
  },
  computed: {
    mainData() {
      const config = [
        {
          label: '个人信息',
          children: [
            { name: '电话', field: 'phone' },
            { name: '邮箱', field: 'email' },
            { name: '部门', field: 'departmentDetail', type: 'array' },
            { name: '职位', field: 'post' },
            { name: '城市', field: 'city' },
            { name: '入职时间', field: 'entryTime', type: 'time' }
          ]
        }
      ];
      if (hasRouteAuth('crm:userList:salesInfo')) {
        config.unshift({
          label: '销售信息',
          hide: !hasRouteAuth('crm:userList:salesInfo'),
          children: [
            { name: '外采额度', type: 'salesInfo', field: 'remainingExternalHarvestAmount', totalField: 'totalExternalHarvestAmount' },
            { name: '可授权<br/>外采额度', type: 'salesInfo', field: 'remainingAuthExternalHarvestAmount', totalField: 'totalAuthExternalHarvestAmount' }
          ]
        });
      }
      return config;
    },
    isSelf() {
      const currentUser = this.$store && this.$store.state.user.userInfo;
      const user = currentUser || this.currentUser;
      return user && user.id === this.userInfo.id;
    },
    showMobilePage() {
      const isMobilePage = this.$store && this.$store.state.app.showMobilePage;
      const showMobilePage = isMobilePage || this.isMobilePage;
      return showMobilePage;
    },
    financeInfo() {
      const baseList = [
        { name: '借款总计', field: 'totalLoans' },
        { name: '还款总计', field: 'totalRepayment' },
        { name: '借款金额', field: 'loanAmount', routeName: 'loan' },
        { name: '还款金额', field: 'repaymentAmount', routeName: 'payBack' },
        { name: '被转欠款', field: 'transfereeArrearsAmount', routeName: 'arrearsTransfer' },
        { name: '冲抵借款', field: 'offsetLoanAmount', routeName: 'reimbursement' },
        { isEmptyCol: true },
        { name: '转交欠款', field: 'transferArrearsAmount', routeName: 'arrearsTransfer' }
      ];
      return this.showMobilePage ? baseList.filter(i => !i.isEmptyCol) : baseList;
    },
    getStatusColor() {
      return this.userInfo.financialInfo.amountStatus === 0 ? '#FF4E5F' : '#31CC9C';
    }
  },
  methods: {
    format,
    getGenderImg(gender) {
      switch (gender) {
        case 0:
          return this.male;
        case 1:
          return this.female;
        default:
          return this.gender;
      }
    },
    toggleTypeChange() {
      this.showToggleBtn = !this.showToggleBtn;
    },
    lookImg(img) {
      this.lookBigImg = img;
      this.showLookBigImg = true;
    },
    closelookImg() {
      this.lookBigImg = '';
      this.showLookBigImg = false;
    },
    openFeishu() {
      if (this.userInfo.openId) {
        window.open(`https://applink.feishu.cn/client/chat/open?openId=${this.userInfo.openId}`);
      }
    },
    toListPage(fieldItem) {
      const query = { proposer: this.userInfo.userName };
      if (['transferArrearsAmount', 'transfereeArrearsAmount'].includes(fieldItem.field)) {
        query.transferType = fieldItem.field === 'transferArrearsAmount' ? 0 : 1;
      }
      const routeUrl = this.$router.resolve({
        name: fieldItem.routeName,
        query
      });
      window.open(routeUrl.href, '_blank');
    },
    getNum(path, defaultVal) {
      return _.get(this.userInfo, path, defaultVal || '--');
    },

    toEexternalHarvest() {
      const routeUrl = this.$router.resolve({
        name: 'externalHarvestCreate',
        query: {
          userId: this.userInfo.id
        }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>

<style lang="scss" scoped>
.card-wrap {
  max-height: 80vh;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 6px 0px #c6c6c6;
  max-width: 85vw;
  @include scrollBar($x: hidden, $y: auto, $width: 2px)
}
.avatar-box {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
.main-list {
  display: flex;
}
.mb24 {
  margin-bottom: 24px;
}
.check-user-card{
	width: 400px;
  font-size: 14px;
  max-width: 85vw;
  .card-top{
    border-radius: 8px;
    .top-element-info{
      @include flexStyle($align: center);
      padding: 16px 0;
      img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .username{
        max-width: 155px;
        margin: 0 2px 0 12px;
        font-size: 16px;
        color: #333;
        font-weight: bold;
      }
      .gender{
        width: 14px;
        height: 14px;
        margin-right: 8px;
      }
      .blank{
        flex: 1;
      }
      .approve-info {
        color: #999;
        margin: 0;
        font-size: 12px;
      }
      .job-status{
        font-size: 12px;
        padding: 0 8px;
        border-radius: 10px;
        height: 20px;
        line-height: 20px;
      }
      .job-status2{
        background-color:#DDE1EA;
        color: #FFF;
      }
      .job-status1{
        background-color:#E2F8F2;
        color: #31CC9C;
      }
    }
    .line{
      width: 100%;
      border-bottom: 1px solid #ebeefd;
    }
  }
  .num-style {
    font-family: DIN Alternate, DIN Alternate-Bold;
    font-weight: 700;
  }
  .card-center{
    display: flex;
    margin-left: 12px;
    p{
      .status{
        margin-right: 24px;
      }
      &:nth-of-type(2){
        border-left: 1px solid #EBEEFD;
        padding-left: 10px;
      }
      .num{
        color: #406EFF;
      }
    }
  }
  .card-main{
    &>div{
      p{
        margin: 0;
      }
    }
    .finance-info {
      margin-bottom: 24px;
      .fixed-info-row {
        background-color: #FAFAFC;
        margin-top: 8px;
        border-radius: 4px;
        ::v-deep .el-col {
          padding: 0 8px;
          height: 36px;
          line-height: 36px;
        }
      }
      .mobile-fixed-info-row {
        padding: 6px 0 !important;
        ::v-deep .el-col {
          height: 30px !important;
          line-height: 30px !important;
        }
      }
      .fixed-info-row-toggle {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        box-shadow: 0 3px 8px -3px #D8DEEB;
        z-index: 1;
      }
      .toggle-info-row {
        background-color: #f2f5fa;
        padding-bottom: 6px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        &::v-deep {
          .el-col {
            height: 30px;
            line-height: 30px;
          }
          .el-col:nth-child(odd) {
            border-right: 1px solid #DDE1EA;
          }
          .el-col:nth-child(-n+2) {
            height: 36px;
            line-height: 36px;
            > div {
              border-bottom: 1px solid #DDE1EA;
            }
          }
          .el-col:nth-child(n + 3) {
            > div {
              margin-top: 4px !important;
            }
          }
        }
      }
      .mobile-toggle-info-row {
        &::v-deep {
          .el-col {
            border-right: none !important;
          }
          .el-col:nth-child(1) {
            > div {
              border-bottom: none !important;
            }
          }
        }
      }
      .info-action-btn {
        float: right;
        clear: both;
        padding: 0;
        font-size: 14px;
        position: relative;
        color: #406EFF;
        cursor: pointer;
        user-select: none;
        font-weight: bold;
        > i {
          font-weight: bold;
        }
      }
    }
    .field-name {
      width: 70px;
      color: #999;
      flex-shrink: 0;
    }
    .field-content {
      flex: 1;
      color: #222;
      .red {
        color: #FF4E5F;
        margin-right: 3px;
      }
      .ml10 {
        margin-left: 10px;
      }
      //margin-left: 8px;
    }
    .bold-number {
      flex-shrink: 0;
      font-size: 16px;
      font-weight: bold;
      font-family: DIN Alternate, DIN Alternate-Bold;
    }
    .link {
      color: #5F77C3;
      cursor: pointer;
    }
  }
  .feishu-btn {
    width: 100%;
    margin-top: 24px;
  }
  ::v-deep .el-loading-mask{
    border-radius: 8px;
  }
}
</style>
